import { Button, DatePicker, Input, NavBar } from "antd-mobile";
import Icon from "@/components/Icon";
import "./index.scss";
import classNames from "classnames";
import { billListData } from "@/contants";
import { useNavigate } from "react-router-dom";
import { useState } from "react";
import dayjs from "dayjs";
import axios from "axios";
import { Toast } from "antd-mobile";

const New = () => {
  // 获取navigate进行路由跳转
  const navigate = useNavigate();
  // 当前账单状态 收入pay/支出income
  const [billType, setBillType] = useState("pay");
  // 账单金额
  const [amount, setAmount] = useState("0.00");
  // 账单日期
  const [date, setDate] = useState(new Date());
  // 使用原因
  const [useFor, setUseFor] = useState("");
  // 控制datePicker选择器的显示与隐藏
  const [showDatePicker, setShowDatePicker] = useState(false);
  // 上传当前账单数据的接口方法
  const updateBillList = async (billDate) => {
    // 发请求更新账单列表数据
    const result = await axios.post("http://localhost:3001/ka", billDate);
    if (result.status === 201) {
      Toast.show({
        icon: "success",
        content: "保存成功",
      });
    }
  };
  // 点击确定按钮的回调
  const save = async () => {
    // 表单验证
    if (+amount === 0)
      return Toast.show({
        content: "金额不能为0",
      });
    if (useFor === "")
      return Toast.show({
        content: "使用原因不能为空",
      });
    // 整理收集的参数
    const billData = {
      type: billType,
      money: billType === "pay" ? -amount : +amount,
      date: date,
      useFor: useFor,
    };
    // 发请求更新数据
    await updateBillList(billData);
    // 返回首页
    navigate("/");
  };
  return (
    <div className="keepAccounts">
      {/* 标题 */}
      <NavBar className="nav" onBack={() => navigate(-1)}>
        记一笔
      </NavBar>

      <div className="header">
        <div className="kaType">
          {/* 点击切换账单状态 */}
          <Button
            shape="rounded"
            onClick={() => setBillType("pay")}
            className={classNames(billType === "pay" && "selected")}
          >
            支出
          </Button>
          <Button
            shape="rounded"
            onClick={() => setBillType("income")}
            className={classNames(billType === "income" && "selected")}
          >
            收入
          </Button>
        </div>

        <div className="kaFormWrapper">
          <div className="kaForm">
            <div className="date">
              <Icon icon="calendar" className="icon" />
              {/* 当前选择的日期 */}
              <span className="text" onClick={() => setShowDatePicker(true)}>
                &nbsp;&nbsp;{dayjs(date).format("YYYY-MM-DD")}
              </span>
              {/* 日期选择器 */}
              <DatePicker
                className="kaDate"
                placeholder="0.00"
                title="记账日期"
                visible={showDatePicker}
                value={date}
                max={new Date()}
                onClose={() => {
                  setShowDatePicker(false);
                }}
                onConfirm={(val) => {
                  setDate(val);
                }}
              />
            </div>
            <div className="kaInput">
              <Input
                className="input"
                type="number"
                value={amount}
                onChange={(val) => setAmount(val)}
              />
              <span className="iconYuan">¥</span>
            </div>
          </div>
        </div>
      </div>

      <div className="kaTypeList">
        {/* 遍历展示不同账单状态列表 */}
        {billListData[billType].map((item) => {
          return (
            <div className="kaType" key={item.type}>
              <div className="title">{item.name}</div>
              <div className="list">
                {item.list.map((item) => {
                  return (
                    // 单个支出原因
                    <div
                      className={classNames(
                        "item",
                        item.type === useFor ? "selected" : ""
                      )}
                      onClick={() => setUseFor(item.type)}
                      key={item.type}
                    >
                      <div className="icon">
                        <Icon icon={item.type} />
                      </div>
                      <div className="text">{item.name}</div>
                    </div>
                  );
                })}
              </div>
            </div>
          );
        })}
      </div>

      <div className="btns">
        <Button className="btn save" onClick={save}>
          保 存
        </Button>
      </div>
    </div>
  );
};

export default New;
